﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jerry Mouse Chat Client</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <script src="scripts/lib/jquery-1.10.2.js"></script>
    <script src="scripts/lib/jquery-ui.js"></script>
    <script src="scripts/lib/sha1.js"></script>
    <script src="scripts/lib/pubnub-3.5.3.min.js"></script>
    <script src="scripts/lib/bootstrap.js"></script>
    <script src="scripts/lib/class.js"></script>
    <script src="scripts/http-requester.js"></script>
    <script src="scripts/persister.js"></script>
    <script src="scripts/site-controller.js"></script>
</head>
    <body>
        <div id="wrapper">
            <form id="login-form" class="form-modal">
                <h2>Jerry Mouse Chat</h2>
                <h3>Login</h3>
                <input type="text" id="tb-login-username" class="input-block-level" placeholder="Username" required="required" />
                <input type="password" id="tb-login-password" class="input-block-level" placeholder="Password" required="required" />

                <div class="row">
                    <button id="btn-login" class="btn btn-primary span">Login</button>
                    <button id="btn-register-form" class="btn span pull-right"><i class="icon-user"></i>Register</button>
                </div>
            </form>
            <form id="register-form" class="form-modal">
                <h2>Jerry Mouse Chat</h2>
                <h3>Registration</h3>
                <input type="text" id="tb-reg-username" placeholder="Username" class="input-block-level" required="required" />
                <input type="password" id="tb-reg-password" placeholder="Password" class="input-block-level" required="required" />
                <input type="password" id="tb-reg-password-retype" placeholder="Retype Password" class="input-block-level" required="required" />
                <div class="row">
                    <button id="btn-register" class="btn btn-primary span">Register</button>
                    <button id="btn-login-form" class="btn span pull-right"><i class="icon-user"></i>Login</button>
                </div>
            </form>
            <div id="chat-container">
                <div class="container">
                    <div class="navbar nav">
                        <div class="navbar-inner">
                            <div class="container">
                                <a class="brand" href="/">JerryChat</a>
                                <div class="nav-collapse collapse">
                                    <div class="pull-right">
                                        <ul class="nav pull-right">
                                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, <span id="sp-username"></span> <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                    <li><a href="#"><i class="icon-envelope"></i> Contact</a></li>
                                                    <li class="divider"></li>
                                                    <li><a id="btn-logout" href="#"><i class="icon-off"></i> Logout</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <div class="span3">
                            <div id="active-rooms-box" class="well well-small">
                                <div>
                                    <span>Active rooms:</span>
                                    <ul></ul>
                                </div>
                            </div>
                            <div id="active-users-box" class="well well-small">
                                <form>
                                    <div class="clearfix">
                                        <span>Active users:</span>
                                        <button id="btn-create-room-dialog"class="btn btn-mini btn-danger pull-right">Create Room</button>
                                    </div>
                                    <ul></ul>
                                </form>
                            </div>
                        </div>

                        <div class="span9">
                            <div id="chat-box" class="well well-small">
                                <div id="rooms-tabs">
                                    <ul class="inline"></ul>
                                </div>
                                <div id="messages-box">
                                    <ul id="messages-list">
                                    </ul>
                                </div>
                                <div id="text-box">
                                    <div class="row-fluid">
                                        <form id="message-form">
                                            <textarea id="message-text" class="pull-left" rows="2"></textarea>
                                            <button id="btn-send-message" class="btn btn-danger pull-right">Send Message</button>
                                            <button id="btn-send-file" class="btn btn-info pull-right">Send File</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <form id="upload-box" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>Send File</h3>
                </div>
                <div class="modal-body">
                    <input  type="text" id="tb-create-title" placeholder="Title" required/>
                    <input  type="password" id="tb-create-password" placeholder="Password" required/>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <button id="btn-create" class="btn btn-primary">Create</button>
                </div>
            </form>
            
            <form id="create-room-box" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>Create room</h3>
                </div>
                <div class="modal-body">
                    <input  type="text" id="tb-room-name" placeholder="Name" required="required"/>
                    <input  type="password" id="tb-room-password" placeholder="Password" />
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                    <button id="btn-create-room" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
    </body>
</html>
